<template>
	<el-dialog
		title="公募变更日历"
		:visible.sync="addComShow"
		width="80%"
		:before-close="cancel"
		style="margin-top: 0 !important"
	>
		<el-card class="box-card">
			<div slot="header" class="clearfix">
				<span style="font-size: 25px; color: #4ab7bd" class="textDate">{{ nowDate }}</span>
				<el-date-picker
					v-model="selectDate"
					type="month"
					placeholder="选择月"
					value-format="yyyy-MM"
					format="yyyy-MM"
					@change="changeDate"
				>
				</el-date-picker>
			</div>
			<div class="text item">
				<el-calendar v-model="selectDate">
					<!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
					<template slot="dateCell" slot-scope="{ data }">
						<p :class="data.isSelected ? 'is-selected' : ''">
							{{ data.day.split('-').slice(1).join('-') }}
							{{ data.isSelected ? '✔️' : '' }}
						</p>
					</template>
				</el-calendar>
			</div>
		</el-card>
	</el-dialog>
</template>
<script>
import { dateFormatter } from '@/utils/timer'
export default {
	props: {
		title: {
			type: String,
			default: ''
		},
		addComShow: {
			type: Boolean,
			default: false
		},
		comIsShow: {
			type: Function,
			default: Function
		}
	},
	data() {
		return {
			selectDate: new Date()
		}
	},
	computed: {
		nowDate: {
			get() {
				const msg = new Date(this.selectDate)
				return `${msg.getFullYear()}年${msg.getMonth() + 1}月`
			},
			set() {
				this.selectDate = new Date(this.selectDate)
			}
		}
	},
	mounted() {},
	methods: {
		changeDate() {
			if (!this.selectDate) {
				this.selectDate = dateFormatter('yyyy-MM', new Date())
			}
			let month = this.selectDate.substr(5, 7)
			if (month < 10) {
				month = month.substr(1, 2)
			}
			this.nowDate = this.selectDate.substr(0, 4) + ' 年  ' + month + ' 月'
			// this.getQueryList();
		},
		cancel() {
			this.$emit('comIsShow')
		},
		// 新增或编辑
		addConfirm() {},
		edit(obj) {}
	}
}
</script>
<style lang="scss" scoped src='./index.scss'>
</style>
